
<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/activePublic' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/activePublic' }">文件服务</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-row>
      <el-col :span="6">
        <ul id="uploadtree" class="ztree"></ul>
      </el-col>
      <el-col :span="18">
        <div id="file_content">

          <el-form label-width="80px">
            <el-form-item label="文件名称" >
              {{form.name}}
            </el-form-item>
            <el-form-item label="文件路径">
              <span>{{form.path}}</span>
            </el-form-item>
            <el-form-item label="文件大小">
              <span>{{form.size}}</span>
            </el-form-item>
            <el-form-item label="md5">
              <span>{{form.md5}}</span>
            </el-form-item>
            <el-form-item label="修改日期">
              <span>{{form.date}}</span>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import 'jquery'
  import  'ztree'
  import 'ztree/css/metroStyle/metroStyle.css'


  export default {
    data() {
      return {
        nodeData: [{
          name: "父节点1", children: [
            {name: "子节点1"},
            {name: "子节点2"}
          ]
        }],
        form:{
          name:"",
          path : "",
          size : "",
          date : "",
          md5 : ""
        },
        setting:{
          view: {
            showLine: false
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          callback: {
            onClick: this.getFileDesc
          }
        }
      }
    },
    mounted(){
      let nodeData = this.nodeData
      $.fn.zTree.init($("#uploadtree"), this.setting, nodeData);
    },
    methods:{
      getFileDesc(event, treeId, treeNode){
        let vm = this;
        this.$http.get("/api/file").then(function (response) {
          response = response.data;
          if (response.code === "200") {
            vm.form = response.result[0];
          }
        })
      }
    }
  }
</script>
<style>

</style>
